<template>
    <div class="product_out">

      <div class="product_title">
        <div class="same_title">
          <a href=""><img src="../../static/img/back.png" alt=""></a>
          借款产品
        </div>
        <ul class="sort_ul">
          <li v-for="(item,index) in titleList" @click="sort(index)">
            {{item.info}}
            <span class="small_icon"></span>
          </li>
        </ul>
      </div>
      <div class="product_out_inner">
        <div class="placeholder"></div>
        <div class="product_list">
          <ul class="loan_out">
            <!--<li v-for="item in productList">111</li>-->
            <li v-for="(item,index) in productList" @click="check_cookie(item.guid)">
              <div class="product_name" v-for="(item2,index) in JSON.parse(item.images)">
                <img :src="item2.imageUrl" alt=""><br>
                {{item.productName}}
              </div>
              <div class="product_amount">
                <div>
                  <div class="product_amount_inner">
                    <div class="interest">
                      {{item.minimumAmount}}-{{item.maxnumAmount}}元<br>
                      <span>每日利率{{item.interestRates}}%</span>
                    </div>
                    <a class="use_money" :href="item.supplierProductUrl">立即用钱</a>
                  </div>
                </div>
                <div class="desc">{{item.productDesc}}</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!--借款产品排序下拉菜单-->
      <div class="sort1 sort_out" @click="outHide">
        <ul class="sort_inner" >
          <li  v-for="(item,index) in sortData.info"  @click="upData($event,index)" :data-key="item.key">{{item.data}}</li>
        </ul>
      </div>
    </div>
</template>

<script>
  import {urlList} from '../assets/urlList.js'//引入接口地址文件
  function GetQueryString(name)
  {
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    var r = decodeURI(window.location.search.substr(1)).match(reg);
    if(r!=null)return  unescape(r[2]); return null;
  }

  let channelNum = GetQueryString("channelNum")
  if(!channelNum){
    channelNum = 0
  }

  function getCookie(cname)
  {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++)
    {
      var c = ca[i].trim();
      if (c.indexOf(name)==0) return c.substring(name.length,c.length);
    }
    return "";
  }
  let auth = getCookie('USER_P2P_H5_COOKIE');//获取cookie

  let sortDataAll = [//排序tab数据—key作为传给后台的参数
    {
      info:[
        {data:'不限',key:'1'},
        {data:'1000元以下',key:'2'},
        {data:'1000-3000元',key:'3'},
        {data:'3000-5000元',key:'4'},
        {data:'5000-1万元',key:'5'},
        {data:'1万元以上',key:'6'}
      ],
    },
    {
      info:[
        {data:'不限',key:'1'},
        {data:'15天内',key:'2'},
        {data:'1个月内',key:'3'},
        {data:'1-3个月',key:'4'},
        {data:'半年以内',key:'5'},
        {data:'半年以上',key:'6'}
      ],
    },
    {
      info:[
        {data:'不限',key:'1'},
        {data:'额度从高到低',key:'2'},
        {data:'额度从低到高',key:'3'},
        {data:'利率从低到高',key:'4'}
      ],
    }
  ]
  let params = new URLSearchParams()
  params.append('currentPage',1)
  params.append('showCount',10)
  params.append('auth',auth)
  console.log(sortDataAll[0].info)
    export default {
      name: "product",
      data() {
        return{
          titleList:[
            {
              info:'额度'
            },
            {
              info:'期限'
            },
            {
              info:'排序'
            },
          ],
          sortData:sortDataAll[0],
          productList:[],
          tag:true,//防止多次刷新
          pageNum:1,
          tabNum1:0,//点击的哪个头部 父tab
          tabNum:0//点击的哪个头部 子tab
        }
      },
      methods:{
        //获取cookie判断是否登录
        getCookie(cname){
          let name = cname + "=";
          let ca = document.cookie.split(';');
          for(let i=0; i<ca.length; i++)
          {
            let c = ca[i].trim();
            if (c.indexOf(name)==0) return c.substring(name.length,c.length);
          }
          return "";
        },
        post:function() {
          let _this = this;
          this.$ajax({
            method:'post',
            url:'/api/homepage/products.html?channelNum='+channelNum,
            data:params
          }).then(function(res) {
            console.log(res);
            _this.productList = res.data.products;
          }).catch(function(res) {
            console.log('错误'+res)
          })
        },
        sort(index) {
          $('.sort_out').fadeIn();
          this.sortData = sortDataAll[index];
          $('.sort_ul>li:eq('+index+')').addClass('on').siblings().removeClass('on');
          this.tabNum = 0;
          if(index!=this.tabNum1){
            $('.sort_inner>li:eq('+this.tabNum+')').addClass('active').siblings().removeClass('active')
            this.tabNum1 = index;
          }
        },
        upData(e,index) {
          $('.sort_out').fadeOut();
          $('.sort_ul>li').removeClass('on');
          this.tabNum = index;
          $('.sort_inner>li:eq('+this.tabNum+')').addClass('active').siblings().removeClass('active')
          console.log(e.target.getAttribute('data-key'))
        },
        check_cookie(e) {
          if(this.getCookie('USER_P2P_H5_COOKIE')){
            window.location.href='goodDetail.html?id='+e
          }else{
            window.location.href='login.html'
          }
        },
        outHide() {
          $('.sort_out').fadeOut();
          $('.sort_ul>li').removeClass('on');
        }
      },
      mounted(){
        let _this = this;
        let Oout = document.querySelector('.product_out');//out_inner滚动不能识别
        let Oinner = document.querySelector('.product_out_inner');
        this.post();//调用下拉刷新方法
        //tab选项为第一个添加类名
        $('.sort_inner>li:first').addClass('active')
        $('.sort_out').height(window.screen.height)
        Oout.addEventListener('scroll',function() {
          if(document.documentElement.clientHeight+Oout.scrollTop>Oinner.offsetHeight){
            if(_this.tag == true){
              _this.pageNum++;
              params.set('currentPage',_this.pageNum)
              console.log('第'+_this.pageNum+'页')
              _this.tag = false;
              _this.$ajax({
                url:'/api/homepage/products.html?channelNum='+channelNum,
                method:'post',
                data:params
              }).then(function(res) {
                console.log( res.data.products);
                  res.data.products.forEach(function(value,index) {
                  _this.productList.push(value);
                  console.log(111)
                })
                _this.tag = true;
              }).catch(function(res) {
                console.log('错误'+res);
              })
            }
          }
        })
      }
    }
</script>

<style scoped>
</style>
